<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>基于Ajax灾区物资运输管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">轮播图管理</div>
                <div class="layui-card-body ">
                    <div class="layui-card-body ">
                        <button class="layui-btn" id="addCarouselBtn">添加后台轮播图</button>
                        <button class="layui-btn layui-btn-warm" id="setCarouselBtn">设置后台轮播图</button>
                    </div>
                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table class="layui-table layui-form" id="table-demo" lay-filter="table-demo"></table>
                    </div>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="reset">预览图片</a>
                        {{# if(d.imgStatus == '2' || d.imgStatus == '1'){ }}
                        <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled">设置登录背景图</a>
                        {{# }else{  }}
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="stop">设置登录背景图</a>
                        {{# } }}
                    </script>
                    <script type="text/html" id="statusTpl">
                        {{# if(d.imgStatus == '1'){ }}
                        <span style="color: #1AA094;">后台轮播图</span>
                        {{# }else if(d.imgStatus == '2') {  }}
                        <span style="color: #80C342;">登录背景图</span>
                        {{# }else {  }}
                        <span style="color: #DB5860;">暂时不展示</span>
                        {{# } }}
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<%-- 上传轮播图 --%>
<div style="display: none; padding: 20px;" id="carouselLayer">
    <form class="layui-form">
        <div class="layui-form-item">
            <label for="L_username" class="layui-form-label">
                <span class="x-red">*</span>上传轮播图</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>选择图片
                </button>
                <button type="button" class="layui-btn layui-btn-normal" id="testListAction">执行上传</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_username" class="layui-form-label">
                <span class="x-red">*</span>图片预览</label>
            <div class="layui-upload-list" id="layui-upload-list">
            </div>
        </div>
    </form>
</div>

</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/xcity.js"></script>
<script>
    layui.use(['laydate','form', 'table', 'upload', 'jquery'], function(){
        var laydate = layui.laydate;
        var  form = layui.form;
        var table = layui.table;
        var $ = layui.$; //内部引入jQuery

        // 上传图片操作
        var upload = layui.upload;
        var uploadInst = upload.render({
            elem: '#test1',
            url: './carouselimg/fileUpload',
            size: 1024,
            auto: false,
            multiple: false, // 单个上传
            number: 3,
            bindAction: '#testListAction',
            choose: function(obj) {
                this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                obj.preview(function(index, file, result) {
                    var img = '<img class="layui-upload-img" src="'+ result +'" id="img1" style="object-fit: cover; width: 92px; height: 92px; margin-right: 10px;">';
                    $('#layui-upload-list').append(img);
                })
            },
            done: function(res) {
                if(res.code === 200) {
                    layer.msg(res.msg);
                }
            },
            error: function() {
                layer.msg(res.msg);
            }
        });

        // 弹出层
        $("#addCarouselBtn").click(function() {
            let indexCheckLayer = layer.open({
                title: '上传轮播图',
                type: 1,
                skin: 'layui-layer-rim',
                area: ['550px', '300px'],
                content: $("#carouselLayer"),
                maxmin: true,
                minStack: false, //最小化不堆叠在左下角
                id: 'page1', //定义 ID，防止重复弹出
            });
        });


        table.render({
            elem: "#table-demo",
            url: './carouselimg/queryCarouseInfo',
            id: 'table-search',
            page: true,
            method: 'post',
            cols:[
                [
                    {field:'ck',type:'checkbox',checked:'true'}
                    ,{field: 'id', title: 'ID', width:100}
                    ,{field: 'imgName', title: '图片名称', width:100}
                    ,{field: 'imgPath', title: '图片路径', width:100}
                    ,{field: 'imgStatus', title: '图片状态', width:130, templet: '#statusTpl'}
                    ,{title: '操作', toolbar: "#barDemo", width: 230, fixed: 'right'}
                ]
            ]
        });

        // 表格操作项(选择)
        // @author-子墨
        // table-demo 对应 lay-filter="table-demo"
        table.on("tool(table-demo)", function(obj){
            var data = obj.data;
            var id = data.id;
            var imgName = data.imgName;
            if(obj.event === 'stop') {
                $.ajax({
                    url: './carouselimg/editCarouseToLogin',
                    type: 'post',
                    data: {id: id},
                    dataType: 'json',
                    success: function (res) {
                        layer.msg(res.msg, {time: 2000}, function () {
                            window.location.reload();
                        })
                    },
                    error: function () {
                        layer.msg("服务器异常")
                    }
                })
            } else if(obj.event === 'reset') {
                let imgSrc = "../carousel/" + imgName;
                let imgHtml = '<img src="'+ imgSrc +'" style="object-fit: cover; width: 100%; height: 100%;">';
                let indexImgPreviewLayer = layer.open({
                    title: '图片预览',
                    type: 1,
                    skin: 'layui-layer-rim',
                    area: ['650px', '400px'],
                    content: imgHtml,
                    maxmin: false,
                    minStack: false, //最小化不堆叠在左下角
                    id: 'page2', //定义 ID，防止重复弹出
                });
            }
        });

        table.on("checkbox(table-demo)", function(obj) {
            console.log(obj.type);
        });

        // 设置轮播背景图片
        $("#setCarouselBtn").click(function() {
            var checkStatus = table.checkStatus('table-search'); //idTest 即为基础参数 id 对应的值
            var len = checkStatus.data.length;
            if(len == 0) {
                layer.msg("请选择轮播图片", {icon: 5});
                return;
            } else if(len > 3) {
                layer.msg("轮图片个数不能大于3张", {icon: 5});
                return;
            }
            var ids = [];
            checkStatus.data.map((item)=>{
                if(item.imgStatus != "2") {
                    ids.push(item.id);
                }
            });
            if(ids.length == 0) {
                layer.msg("选择的图片已是登录背景图, 请重新选择", {icon: 5});
                return;
            }
            layer.confirm('确认要设置为轮播图片吗？', function(index) {
                $.ajax({
                   url: './carouselimg/editCarouse',
                   type: 'post',
                   data: {ids: ids.join(",")},
                   dataType: 'json',
                   success: function (res) {
                       layer.msg(res.msg, {icon: 1}, function () {
                           location.reload();
                       });
                   },
                   error: function() {
                       layer.msg("服务器异常");
                   }
                });

            });
        });

    });

</script>
</html>
